<template>
    <div class="translate-contioner">
        <div class="trans-tabs">
            <el-tabs v-model="state.activeName">
                <el-tab-pane label="文本" name="online">
                    <template #label>
                        <div class="tab-label">文本</div>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="文档" name="file">
                    <template #label>
                        <div class="tab-label">文档</div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="translate-content">
            <Transition name="fade">
                <TranslateOnline v-if="state.activeName == 'online'" />
                <TranslateFile v-else />
            </Transition>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import TranslateOnline from './components/TranslateOnline.vue'
import TranslateFile from './components/TranslateFile.vue'

const state = reactive({
    activeName: 'online',
})

</script>

<style lang="scss" scoped>
.translate-contioner{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.trans-tabs {
    .tab-label {
        min-width: 70px;
        color: #85829b;
    }

    :deep(.el-tabs__item.is-active) {
        .tab-label {
            color: #3a384f;
            font-weight: 500;
        }
    }
}

.translate-content{
    position: absolute;
    top: 48px;
    left: 0;
    bottom: 0;
    right: 0;
}
</style>